<template>

  <li
      v-for="(item,index) in commentData"
      :key="item.id"
  >
      <p> {{index + 1}}楼  pid:{{item.pid}} --- {{handlerText(item)}} :  {{ item.comment }} <a href="javascript:;" @click="setRepFlag(item)">回复</a>
      </p>
    <div v-if="item.flag">
      <p>
        <textarea v-model="item.replyText"></textarea>
      </p>
      <p>
        <button @click="addReply(item)">提交评论</button>
      </p>
    </div>
    <div v-if="item.children">
      <ul>
        <!--  在组件中自己使用自己-->
        <comment-comp v-if="item.children" :commentData="item.children" @add-reply="addReply"  ></comment-comp>
      </ul>
    </div>


  </li>

</template>


<script setup>
const props = defineProps({
  commentData: Array
})

// 子穿父 vue3 新语法 Emits
const emit = defineEmits(['addReply','remove'])

const setRepFlag = (item) => {
  item.flag = !item.flag
}
// 提交评论
const addReply = (item) => {
  let  replyText = item.replyText
  emit('addReply',item,replyText)
  item.flag = false
  item.replyText = ''
}
// 回复人处理
function handlerText(item) {
  let recoverName = item.recoverName ?  '@' + item.recoverName : ''
  return  item.recoverName === item.userName ?  '我说' : item.userName + recoverName + '说'
}

</script>


<style scoped>
li{
  width: 100%;
  height: 100%;
  background-color: skyblue;
}
</style>
